<template>
  <div class="demo-box">
    <tabs v-model="currentTabName">
     <tab-panel name="TabOne">
        <template #title="name">
          <b style="color: #5fff3f;">custom1-{{ name }}</b>
        </template>
        Content 1
      </tab-panel>
      <tab-panel name="TabTwo">Content 2</tab-panel>
      <tab-panel name="TabThree">
        <template #title="name">
          <b style="color: #ff3d23;">custom3-{{ name }}</b>
        </template>
        Content 3
      </tab-panel>
    </tabs>
  </div>
</template>

<script lang='tsx'>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "TabsDemo",
  setup() {
    const currentTabName = ref("");
    return {
      currentTabName
    };
  }
});
</script>

<style lang='scss' scoped>
</style>
